<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 1、定义vue的div标签 -->
		<div id="app">
			
			<!-- 3、定义路由请求地址
					router-link：在解析之后形成a标签
					to：解析之后，形参href属性，实现页面跳转
			 -->
			<router-link to="/home">家</router-link>
			<router-link to="/dog">狗</router-link>
			
			<!-- 4、一般需要在当前页面中展现新组件的内容（html），提前设置展现位置
					之后会被渲染成一个div
			 -->
			<router-view></router-view>
			
			
		</div>
		
		
		<!-- 6、定义组件模板 -->
		<template id="homeTemplate">
			<div>
				<h1>这里是home组件</h1>
			</div>
		</template>
		
		
		<template id="dogTemplate">
			<div>
				<h1>这里是dog组件</h1>
			</div>
		</template>
		
		<!-- 2、导入js文件
		 注意：
			点导入vue.js文件
			再导入router.js文件呢
		 -->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script type="text/javascript">
			
			//5、定义组件
			let homeComponent = {
				template: "#homeTemplate"
			}
			
			let dogComponent = {
				template: "#dogTemplate"
			}
			
			/**
			 * 7、定义路由对象：实现路由和请求的绑定
			 * 
			 * 	routes:是一个数组的结构，数组中包含对象的结构
			 * 	path:"拦截请求的路径名"
			 *  component:	组件的对象
			 */
			const router = new VueRouter({
				routes:[
					{path:"/home",component:homeComponent},
					{path:"/dog",component:dogComponent}
					]
			})
			
			//8、将路由对象和Vue的实例进行绑定
			const vue = new Vue({
				el: "#app",
				data:{},
				methods:{},
				mounted() {
					
				},
				//属性router: 定义的路由对象
				router
				
			})
			
			
		</script>
		
	</body>
</html>
